CSS Animation Range: Syväsukellus vierityspohjaisten animaatioiden hallintaan

Vuosien ajan käyttäjän vieritykseen reagoivien animaatioiden luominen on ollut mukaansatempaavien verkkokokemusten kulmakivi. Hienovaraisista häivytyksistä monimutkaisiin parallaksiefekteihin, nämä interaktiot puhaltavat eloa staattisiin sivuihin. Niillä on kuitenkin perinteisesti ollut merkittävä hinta: riippuvuus JavaScriptistä. Kirjastot ja omat skriptit, jotka kuuntelevat vieritystapahtumia, voivat olla suorituskykyä vaativia, sillä ne ajetaan pääsäikeessä ja voivat johtaa nykiviin, reagoimattomiin käyttökokemuksiin erityisesti heikompitehoisilla laitteilla.

Astumme nyt web-animaatioiden uuteen aikakauteen. Viimeisimmät CSS-kehitysaskeleet mullistavat tavan, jolla käsittelemme näitä interaktioita. Vierityspohjaisten animaatioiden (Scroll-Driven Animations) spesifikaatio tarjoaa tehokkaan, deklaratiivisen ja erittäin suorituskykyisen tavan linkittää animaatiot suoraan vierityspalkin sijaintiin tai elementin näkyvyyteen näkymäalueella – kaikki tämä ilman yhtäkään riviä JavaScriptiä.

Tämän uuden paradigman ytimessä on kaksi avainominaisuutta: animation-timeline ja animation-range. Vaikka animation-timeline luo puitteet määrittelemällä, mikä ohjaa animaatiota (esim. dokumentin vierityspalkki), animation-range antaa meille sen yksityiskohtaisen hallinnan, jota olemme aina kaivanneet. Sen avulla voimme määritellä animaation tarkat alku- ja loppupisteet kyseisellä aikajanalla.

Tässä kattavassa oppaassa tutkimme CSS:n vierityspohjaisten animaatioiden maailmaa keskittyen erityisesti animation-range-ominaisuuteen. Käsittelemme:

• Vieritys- ja näkymäedistymisen aikajanojen peruskäsitteet.
• Yksityiskohtainen erittely animation-range-ominaisuudesta ja sen syntaksista.
• Käytännön esimerkkejä edistymispalkkien, paljastusefektien ja muiden luomiseen.
• Parhaat käytännöt suorituskyvyn, saavutettavuuden ja selainyhteensopivuuden osalta.

Valmistaudu luomaan animaatioita, jotka eivät ole vain kauniita, vaan myös uskomattoman tehokkaita siirtämällä monimutkaisen logiikan pääsäikeestä kompositointisäikeeseen, mikä takaa silkinsileän käyttökokemuksen.

Perusteiden ymmärtäminen: Mitä ovat vierityspohjaiset animaatiot?

Ennen kuin syvennymme animation-range-ominaisuuteen, on tärkeää ymmärtää järjestelmä, jossa se toimii. Perinteisesti CSS-animaatiot on sidottu aikapohjaiseen aikajanaan. Kun määrität animation-duration: 3s;, animaatio etenee 0 %:sta 100 %:iin kolmessa sekunnissa kellon ohjaamana.

Vierityspohjaiset animaatiot muuttavat tämän perusteellisesti. Ne esittelevät edistymisen aikajanan (Progress Timeline), jota ei ohjaa aika, vaan edistyminen – joko säiliön vierittämisen edistyminen tai elementin näkyvyyden edistyminen sen liikkuessa näkymäalueen läpi.

Tämä uusi malli tarjoaa kolme suurta etua:

1. Suorituskyky: Koska nämä animaatiot voidaan ajaa pääsäikeen ulkopuolella selaimen kompositointisäikeessä, ne eivät kilpaile resursseista JavaScriptin, asettelun tai piirto-operaatioiden kanssa. Tuloksena on poikkeuksellisen sulava animaatio, vapaa siitä nykimisestä, joka usein vaivaa JS-pohjaisia vierityskuuntelijoita.
2. Yksinkertaisuus: CSS-syntaksi on deklaratiivinen. Ilmaiset, mitä haluat tapahtuvan, ja selain hoitaa monimutkaiset laskelmat. Tämä johtaa usein puhtaampaan ja ylläpidettävämpään koodiin verrattuna imperatiiviseen JavaScriptiin.
3. Saavutettavuus: Animaatiot kunnioittavat käyttäjän asetuksia, kuten prefers-reduced-motion, automaattisesti, mikä helpottaa inklusiivisten kokemusten rakentamista.

On olemassa kaksi ensisijaista edistymisen aikajanatyyppiä, joiden kanssa työskentelet:

• Vierityksen edistymisen aikajana (Scroll Progress Timeline): Seuraa vierityspaikkaa vierityssäiliössä ("scroller"). Aikajana edustaa koko vieritettävää aluetta, aivan ylhäältä (0 %) aivan alas (100 %).
• Näkymän edistymisen aikajana (View Progress Timeline): Seuraa elementin näkyvyyttä sen ylittäessä näkymäalueen. Aikajana edustaa elementin matkaa siitä hetkestä, kun se juuri saapuu näkymäalueelle, siihen hetkeen, kun se poistuu sieltä kokonaan.

Ydinkonsepti: animation-timeline-ominaisuus

Ensimmäinen askel vierityspohjaisen animaation luomisessa on irrottaa tavallinen CSS-animaatio sen oletusarvoisesta aikapohjaisesta kellosta ja liittää se uuteen edistymispohjaiseen aikajanaan. Tämä tehdään animation-timeline-ominaisuudella.

Se hyväksyy funktion, joka määrittelee aikajanan lähteen: joko scroll() vierityksen edistymisen aikajanalle tai view() näkymän edistymisen aikajanalle.

Vierityksen edistymisen aikajana: scroll()

scroll()-funktio sitoo animaation säiliön vierityspaikkaan. Sen yleisin muoto on scroll(scroller, axis).

• scroller: Määrittää, mitä vierityselementtiä seurataan. Se voi olla root (dokumentin näkymäalue), self (elementti itse, jos se on vieritettävä) tai nearest (lähin esivanhempi-vierityselementti).
• axis: Määrittää seurattavan vieritys-akselin. Se voi olla block (sisällön pääasiallinen virtaussuunta, yleensä pystysuora), inline (kohtisuorassa block-suuntaan, yleensä vaakasuora), y tai x.

Esimerkki: Yksinkertainen dokumentin vierityksen edistymispalkki

Luodaan sivun yläreunaan edistymispalkki, joka kasvaa käyttäjän vierittäessä alaspäin.

            <!-- HTML -->
<div id="progress-bar"></div>

<!-- CSS -->
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 10px;
  width: 100%;
  background-color: dodgerblue;
  transform-origin: left;

  /* Irrota ajasta, liitä dokumentin vieritykseen */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}
            

              
                Copy
              
            
          

Tässä esimerkissä grow-progress-animaatiota ohjaa nyt päädokumentin (root) vieritys sen pystyakselilla (block). Kun vierität sivua 0 %:sta 100 %:iin, edistymispalkin scaleX-muunnos menee 0:sta 1:een.

Näkymän edistymisen aikajana: view()

view()-funktio sitoo animaation elementin näkyvyyteen sen vierityssäiliössä. Tämä on uskomattoman hyödyllistä "paljastusanimaatioiden" käynnistämiseen, kun elementit tulevat näkyviin.

Sen syntaksi on view(axis, inset).

• axis: Valinnainen, samat arvot kuin scroll()-funktiossa (esim. block). Määrittelee, mikä vieritysportin akseli otetaan huomioon.
• inset: Valinnainen, antaa sinun säätää näkyvyyden laskennassa käytettävän näkymäalueen rajoja, samalla tavalla kuin IntersectionObserverin rootMargin.

Esimerkki: Elementin häivyttäminen näkyviin

            <!-- HTML -->
<div class="content-box reveal">
  This box will fade in as it enters the screen.
</div>

<!-- CSS -->
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.reveal {
  /* Liitä animaatio tämän elementin näkyvyyteen */
  animation: fade-in linear;
  animation-timeline: view();
}
            

              
                Copy
              
            
          

Tässä fade-in-animaatio on linkitetty .reveal-elementtiin itseensä. Animaatio etenee, kun elementti kulkee näkymäalueen poikki. Mutta miten se tarkalleen ottaen toimii? Milloin se alkaa ja loppuu? Tässä kohtaa animation-range astuu kuvaan.

Illan tähti: animation-range

Vaikka animation-timeline asettaa kontekstin, animation-range tarjoaa kriittisen hallinnan. Se määrittelee, mikä osa aikajanasta katsotaan "aktiiviseksi" ja yhdistää sen @keyframes-animaatiosi 0 %:n ja 100 %:n edistymiseen.

Perussyntaksi on:

            animation-range: <range-start> <range-end>;
            

              
                Copy
              
            
          

Tämä kertoo selaimelle: "Kun aikajana saavuttaa <range-start>-pisteen, animaation tulisi olla 0 %:ssa. Kun se saavuttaa <range-end>-pisteen, animaation tulisi olla 100 %:ssa."

Arvot <range-start> ja <range-end> voivat olla yhtä useista tyypeistä:

• Avainsanat (view():lle): Erityiset, erittäin intuitiiviset nimet kuten entry, exit, cover ja contain. Tutkimme näitä yksityiskohtaisesti.
• Prosenttiosuudet: Prosenttiosuus aikajanan kokonaiskestosta. scroll()-aikajanalla 0% on yläreuna ja 100% on alareuna.
• CSS-pituudet: Kiinteä pituusarvo, kuten 100px tai 20rem. Tämä määrittää pisteen kyseisellä vieritysetäisyydellä aikajanan alusta.

Voit jopa yhdistää avainsanoja prosentteihin tai pituuksiin erittäin hienovaraista hallintaa varten, kuten entry 50% tai cover 200px.

Käytännön syväsukellus: animation-range ja scroll()-aikajanat

Kun työskentelet scroll()-aikajanan kanssa, yhdistät animaatiosi vierityselementin koko vieritysalueeseen. Katsotaan, miten animation-range auttaa meitä kohdistamaan tiettyihin osiin tätä matkaa.

Tiettyyn vieritysosioon kohdistaminen

Kuvittele, että sinulla on pitkä artikkeli ja haluat tietyn grafiikan animoituvan vain, kun käyttäjä vierittää sivun keskimmäisen puoliskon läpi.

            @keyframes spin-and-grow {
  from { transform: rotate(0deg) scale(0.5); opacity: 0; }
  to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

.special-graphic {
  animation: spin-and-grow linear;
  animation-timeline: scroll(root block);

  /* Animaatio alkaa 25 %:n vierityksestä ja päättyy 75 %:n vieritykseen */
  animation-range: 25% 75%;
}
            

              
                Copy
              
            
          

Miten se toimii:

• Ennen kuin käyttäjä on vierittänyt 25 % sivusta, animaatio pidetään 0 %:n tilassaan (rotate(0deg) scale(0.5) opacity: 0).
• Kun käyttäjä vierittää 25 %:n merkistä 75 %:n merkkiin, animaatio etenee 0 %:sta 100 %:iin.
• Kun käyttäjä vierittää 75 %:n merkin ohi, animaatio pidetään 100 %:n tilassaan (rotate(360deg) scale(1) opacity: 1).

Tämä yksinkertainen animation-range-lisäys antaa meille tehokkaan hallinnan efektien ajoitukseen ja sijoitteluun laajemmassa vierityskokemuksessa.

Absoluuttisten pituuksien käyttö

Voit myös käyttää absoluuttisia pituuksia. Jos esimerkiksi haluat animaation tapahtuvan vain ensimmäisten 500 vierityspikselin aikana:

            .hero-animation {
  animation: fade-out linear;
  animation-timeline: scroll(root block);

  /* Animaatio alkaa 0px:n vierityskohdasta ja päättyy 500px:iin */
  animation-range: 0px 500px;
}
            

              
                Copy
              
            
          

Tämä sopii täydellisesti sivun hero-osion esittelyanimaatioihin, joiden tulisi päättyä, kun käyttäjä on alkanut vierittää syvemmälle sisältöön.

animation-range:n hallinta view()-aikajanojen kanssa

Tässä animation-range muuttuu todella taianomaiseksi. Kun sitä käytetään view()-aikajanan kanssa, alueen arvot eivät perustu koko dokumentin vierityskorkeuteen, vaan elementin näkyvyyteen näkymäalueella. Tässä erityiset nimetyt alueet astuvat kuvaan.

Nimettyjen alueiden selitykset

Kuvittele elementti ("kohde") ja näkymäalue ("vierityselementti"). Nimetyt alueet kuvaavat näiden kahden laatikon välistä suhdetta.

• entry: Vaihe, jossa kohde on tulossa näkymäalueelle. Se alkaa hetkestä, jolloin kohteen alareuna ylittää näkymäalueen yläreunan, ja päättyy, kun kohteen alareuna ylittää näkymäalueen alareunan.
• exit: Vaihe, jossa kohde on poistumassa näkymäalueelta. Se alkaa, kun kohteen yläreuna ylittää näkymäalueen yläreunan, ja päättyy, kun kohteen yläreuna ylittää näkymäalueen alareunan.
• cover: Vaihe, jossa kohde on tarpeeksi suuri peittämään näkymäalueen kokonaan. Se alkaa, kun kohteen yläreuna osuu näkymäalueen yläreunaan, ja päättyy, kun kohteen alareuna osuu näkymäalueen alareunaan. Jos kohde on pienempi kuin näkymäalue, tätä vaihetta ei koskaan tapahdu.
• contain: Vaihe, jossa kohde on kokonaan näkymäalueen sisällä. Se alkaa, kun kohteen alareuna saapuu näkymäalueen alareunaan, ja päättyy, kun kohteen yläreuna poistuu näkymäalueen yläreunasta. Jos kohde on suurempi kuin näkymäalue, tätä vaihetta ei koskaan tapahdu.

Käytännön esimerkki: Klassinen "paljasta vieritettäessä" -efekti

Luodaan uudelleen yksi yleisimmistä vierityspohjaisista animaatioista: elementti, joka häivyttää ja liukuu näkyviin saapuessaan ruudulle. Perinteisesti tämä vaati Intersection Observerin JavaScriptissä. Nyt se on muutaman rivin CSS-koodia.

            <!-- HTML -->
<section>
  <div class="content-box reveal">Box 1</div>
  <div class="content-box reveal">Box 2</div>
  <div class="content-box reveal">Box 3</div>
</section>

<!-- CSS -->
@keyframes fade-and-slide-in {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-and-slide-in linear both; /* 'both' on tärkeä! */
  animation-timeline: view();

  /* Aloita animaatio, kun elementti saapuu, lopeta kun se on puolivälissä saapumista */
  animation-range: entry 0% entry 50%;
}

            

              
                Copy
              
            
          

Puretaanpa tuo animation-range-arvo osiin:

• animation-fill-mode: both; on ratkaiseva. Se varmistaa, että ennen animaation aktiivista aluetta elementti pysyy from-tilassaan (näkymätön ja alaspäin siirrettynä), ja alueen jälkeen se pysyy to-tilassaan (täysin näkyvissä ja paikallaan).
• entry 0%: Aloituspiste. Tämä viittaa entry-vaiheen alkuun – tarkalleen siihen hetkeen, kun elementtimme alaosa koskettaa näkymäalueen alaosaa.
• entry 50%: Loppupiste. Tämä viittaa hetkeen, jolloin elementti on suorittanut 50 % matkastaan entry-vaiheen läpi. Tähän mennessä animaatio on 100 % valmis.

Tämä antaa miellyttävän vaikutelman, jossa kohde on täysin näkyvissä ja lopullisessa asemassaan hyvissä ajoin ennen kuin käyttäjä on vierittänyt sen ruudun keskelle. Voit säätää näitä prosenttiosuuksia saadaksesi juuri haluamasi tuntuman. Esimerkiksi entry 25% entry 75% loisi pidempikestoisen animaation.

Edistynyt hallinta: Parallaksiefektin luominen

Kokeillaan monimutkaisempaa efektiä. Saamme taustakuvan liikkumaan eri nopeudella kuin vieritys, mutta vain silloin, kun sen säiliö peittää näkymäalueen.

            <!-- HTML -->
<div class="parallax-container">
  <div class="parallax-bg"></div>
  <h2>Parallax Section</h2>
</div>

<!-- CSS -->
@keyframes parallax-shift {
  from { background-position: 50% -50px; }
  to   { background-position: 50% 50px; }
}

.parallax-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  inset: -50px; /* Tee siitä säiliötä korkeampi liikkeen mahdollistamiseksi */
  background-image: url('your-image.jpg');
  background-size: cover;

  animation: parallax-shift linear both;
  animation-timeline: view(block);
  /* Animoi koko 'cover'-vaiheen ajan */
  animation-range: cover 0% cover 100%; 
}

            

              
                Copy
              
            
          

Tässä tapauksessa parallax-shift-animaatio on sidottu parallax-bg-elementin aikajanaan. animation-range on asetettu koko cover-vaiheen kestolle. Tämä tarkoittaa, että animaatio alkaa edetä vasta, kun säiliö on tarpeeksi korkea peittämään näkymäalueen ja on sijoitettu siten, että sen yläreuna on näkymäalueen yläreunassa. Se päättyy, kun säiliön alareuna saavuttaa näkymäalueen alareunan. Tuloksena on sulava, suorituskykyinen parallaksiefekti, joka on täydellisesti synkronoitu vieritysasennon kanssa.

Kaiken yhdistäminen: Lyhenteet ja parhaat käytännöt

animation-lyhenne

Syntaksin tiivistämiseksi aikajana- ja alueominaisuudet voidaan sisällyttää suoraan animation-lyhenneominaisuuteen. Tämä on uusi, ehdotettu syntaksi, joka on saamassa tukea.

Esimerkkimme "paljasta vieritettäessä" voidaan kirjoittaa uudelleen näin:

            .reveal {
  animation: fade-and-slide-in linear both view() entry 0% entry 50%;
}
            

              
                Copy
              
            
          

Tämä yksi rivi korvaa kolme erillistä animation-, animation-timeline- ja animation-range-ominaisuutta. Se on siisti, tehokas ja pitää kaiken animaatiologiikan yhdessä paikassa.

Suorituskykyyn liittyvät huomiot

Vierityspohjaisten animaatioiden ensisijainen etu on suorituskyky. Tämän edun säilyttämiseksi sinun tulisi suosia sellaisten ominaisuuksien animointia, jotka kompositointisäie voi käsitellä. Nämä ovat pääasiassa:

• transform (translate, scale, rotate)
• opacity

Ominaisuuksien kuten width, height, margin tai color animointi toimii edelleen, mutta ne saattavat laukaista asettelu- ja piirto-operaatioita, jotka tapahtuvat pääsäikeessä. Vaikka ne ovatkin usein sulavampia kuin JS-pohjaiset vaihtoehdot, ne eivät ole yhtä suorituskykyisiä kuin vain kompositointisäikeessä tapahtuvat animaatiot.

Saavutettavuus ja vararatkaisut

On ratkaisevan tärkeää rakentaa kaikille käyttäjille. Vierityspohjaiset animaatiot ovat hienoja, mutta jotkut käyttäjät kokevat liikkeen häiritsevänä tai pahoinvointia aiheuttavana.

1. Kunnioita käyttäjän asetuksia: Kääri aina liikeeseen liittyvä CSS prefers-reduced-motion-mediakyselyn sisään.

            @media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fade-and-slide-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
}
            

              
                Copy
              
            
          

2. Tarjoa vararatkaisut vanhemmille selaimille: Koska tämä on uusi teknologia, sinun on otettava huomioon selaimet, jotka eivät vielä tue sitä. @supports-sääntö on tässä paras ystäväsi. Tarjoa yksinkertainen, animoimaton oletustila ja paranna sitä sitten tukeville selaimille.

            /* Oletustila kaikille selaimille */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Parannus tukeville selaimille */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; /* Aseta animaation alkutila */
      transform: translateY(50px);
      animation: fade-and-slide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}

            

              
                Copy
              
            
          

Selaintuki ja tulevaisuudennäkymät

Vuoden 2023 lopulla CSS:n vierityspohjaisia animaatioita tukevat Chrome ja Edge. Ne ovat aktiivisessa kehityksessä Firefoxissa, ja Safari harkitsee niiden käyttöönottoa. Kuten minkä tahansa huippuluokan verkkoalustan ominaisuuden kohdalla, on tärkeää tarkistaa resurssit, kuten CanIUse.com, viimeisimpien tukitietojen saamiseksi.

Tämän teknologian käyttöönotto merkitsee merkittävää muutosta web-kehityksessä. Se antaa suunnittelijoille ja kehittäjille mahdollisuuden luoda rikkaita, interaktiivisia ja suorituskykyisiä kokemuksia deklaratiivisesti, vähentäen riippuvuuttamme JavaScriptistä kokonaisen yleisten käyttöliittymämallien luokan osalta. Selaintuen kypsyessä on odotettavissa, että vierityspohjaisista animaatioista tulee olennainen työkalu jokaisen front-end-kehittäjän työkalupakissa.

Yhteenveto

CSS:n vierityspohjaiset animaatiot, ja erityisesti animation-range-ominaisuus, edustavat valtavaa harppausta eteenpäin web-animaatiossa. Olemme siirtyneet aikapohjaisista aikajanoista edistymispohjaisiin aikajanoihin, mikä mahdollistaa monimutkaisten, vierityksestä tietoisten interaktioiden luomisen ennennäkemättömällä suorituskyvyllä ja yksinkertaisuudella.

Olemme oppineet, että:

• animation-timeline linkittää animaation scroll()- tai view()-edistymisaikajanaan.
• animation-range antaa meille tarkan hallinnan, yhdistäen tietyn osan siitä aikajanasta animaatiomme avainkehyksiin.
• view()-aikajanojen kanssa tehokkaat nimetyt alueet, kuten entry, exit, cover ja contain, tarjoavat intuitiivisen tavan hallita animaatioita elementin näkyvyyden perusteella.
• Pysymällä kompositointiystävällisissä ominaisuuksissa ja tarjoamalla vararatkaisuja voimme käyttää tätä teknologiaa jo tänään rakentaaksemme saavutettavia, suorituskykyisiä ja ihastuttavia käyttökokemuksia.

Päivät, jolloin taisteltiin nykivien, pääsäiettä tukkivien vierityskuuntelijoiden kanssa yksinkertaisten efektien vuoksi, ovat luetut. Vierityspohjaisen animaation tulevaisuus on täällä, se on deklaratiivinen ja se on kirjoitettu CSS:llä. On aika aloittaa kokeilut.